package pri.jz.keeper.ui.view

import androidx.compose.foundation.*
import androidx.compose.foundation.interaction.*
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.lifecycle.viewmodel.compose.viewModel
import pri.jz.keeper.R
import pri.jz.keeper.ui.theme.KeeperTheme
import pri.jz.keeper.ui.theme.Shapes
import pri.jz.keeper.ui.register.RegisterViewModel


/**
 *Author by: JZ
 *Email: 2451756617@qq.com
 *PS:注册界面
 */

/**
 *
 * @param onFinished 点击左上角返回上一页使
 * @param onRegister 注册
 */
@Composable
fun RegisterView(
    viewModel: RegisterViewModel = viewModel(),

    ) {
    ConstraintLayout(
        modifier = Modifier.fillMaxSize()
    ) {
        val uiState by viewModel.uiState.collectAsState()
        val (
            tipRes,numberRes,passwordRes,passwordConfirmRes,registerRes,
            codeLayoutRes,finishRes,networkRes,topRes
        ) = createRefs()
        NetworkLostSheet(
            modifier = Modifier.constrainAs(networkRes) {
                top.linkTo(parent.top)
            }
        )
        Spacer(modifier = Modifier.height(10.dp).constrainAs(topRes){
            top.linkTo(networkRes.bottom)
        })
        IconButton(
            onClick = viewModel::onFinish,
            modifier = Modifier.constrainAs(finishRes) {
                top.linkTo(topRes.bottom)
                start.linkTo(parent.start,20.dp)
            }
        ) {
            Icon(painter = painterResource(R.drawable.img_back),contentDescription = null)
        }

        Text(
            "加入我们！",
            fontSize = 25.sp,
            modifier = Modifier.constrainAs(tipRes){
                top.linkTo(finishRes.bottom,25.dp)
                start.linkTo(numberRes.start)
            },
            color = Color.Black,
            fontStyle = FontStyle.Italic
        )

        OutlinedTextField(
            value = viewModel.numberText,
            onValueChange = {viewModel.onNumberTextChange(it)},
            singleLine = true,
            placeholder = { Text("手机号") },
            shape = RoundedCornerShape(15.dp),
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
            modifier = Modifier.fillMaxWidth(0.75f)
                .constrainAs(numberRes){
                    top.linkTo(tipRes.bottom,40.dp)
                    centerHorizontallyTo(parent)
                },
            isError = uiState.isNumberError,
            leadingIcon = {
                Icon(
                    painter = painterResource(R.drawable.img_username),
                    contentDescription = null,
                    modifier = Modifier.size(16.dp)
                )
            },
            label = { Text(uiState.numberLabel)  }
        )
        OutlinedTextField(
            value = viewModel.passwordText,
            onValueChange = {viewModel.onPasswordTextChange(it)},
            placeholder = { Text("密码") },
            singleLine = true,
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
            visualTransformation = PasswordVisualTransformation(),
            leadingIcon = {
                Icon(
                    painterResource(R.drawable.img_password),
                    contentDescription = null,
                    modifier = Modifier.size(16.dp)
                )
            },
            isError = uiState.isPasswordError,
            label = { Text(uiState.passwordLabel) },
            modifier = Modifier.
            constrainAs(passwordRes){
                start.linkTo(numberRes.start)
                top.linkTo(numberRes.bottom,40.dp)
            }.fillMaxWidth(0.75f),
            shape = Shapes.medium,
        )
        OutlinedTextField(
            value = viewModel.passwordConfirmText,
            onValueChange = {viewModel.onPasswordConfirmTextChange(it)},
            placeholder = { Text("确认密码") },
            singleLine = true,
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
            visualTransformation = PasswordVisualTransformation(),
            leadingIcon = {
                Icon(
                    painterResource(R.drawable.img_password),
                    contentDescription = null,
                    modifier = Modifier.size(16.dp)
                )
            },
            isError = uiState.isPasswordConfirmError,
            label = { Text(uiState.passwordConfirmLabel) },
            modifier = Modifier.
            constrainAs(passwordConfirmRes){
                start.linkTo(passwordRes.start)
                top.linkTo(passwordRes.bottom,40.dp)
            }.fillMaxWidth(0.75f),
            shape = Shapes.medium,
        )
        Row (
            modifier = Modifier.constrainAs(codeLayoutRes) {
                top.linkTo(passwordConfirmRes.bottom,40.dp)
                start.linkTo(passwordConfirmRes.start)
            }.fillMaxWidth(0.75f),
            verticalAlignment = Alignment.CenterVertically
        ){
            OutlinedTextField(
                value = viewModel.codeText,
                onValueChange = {viewModel.onCodeTextChange(it)},
                placeholder = { Text("验证码") },
                shape = Shapes.medium,
                singleLine = true,
                isError = uiState.isCodeError,
                label = { Text(uiState.codeLabel) },
                keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
                modifier = Modifier.weight(1f)
            )
            Spacer(modifier = Modifier.width(10.dp))
            MainButton(
                modifier = Modifier.width(80.dp),
                text = viewModel.codeBtnText,
                enabled = uiState.codeBtnState,
                onClick = viewModel::onCodeGain
            )
        }
        MainButton(
            modifier = Modifier.fillMaxWidth(0.6f)
                .height(54.dp).
                constrainAs(registerRes){
                    top.linkTo(codeLayoutRes.bottom,100.dp)
                    centerHorizontallyTo(parent)
                },
            text = "注册",
            onClick = viewModel::onRegister
        )
    }

}
@Preview
@Composable
fun PreviewRegisterView() {
    KeeperTheme {
        RegisterView()
    }
}